<template>
    <el-drawer
            :title="title"
            v-model="drawer"
            :direction="direction"
            :before-close="close"
            :close-on-click-modal="false"
            :show-close="false"
    >
        <div style="overflow: hidden;height: 100%;">
            <el-form label-width="70px" size="medium" style="width: 90%;margin: auto">
                <div v-for="item in searchDataVa" :key="item">
                    <el-form-item :label="item.label">

                        <el-input v-if="item.type=='input'"
                                  type="text"
                                  v-model="item.value"/>

                        <el-date-picker
                                v-if="item.type=='date'"
                                v-model="item.value"
                                type="daterange"
                                unlink-panels
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :shortcuts="shortcuts"
                                value-format="YYYY-MM-DD"
                                @change="formatConvert(item)"
                        >
                        </el-date-picker>

                        <va-select v-if="item.type=='select'"
                                   v-model="item.value"
                                   :keyData="item.type"/>

                        <va-radio v-if="item.type=='radio'"
                                  v-model="item.value"
                                  :keyData="item.type"/>


                    </el-form-item>
                </div>


            </el-form>
            <div class="fixedBox search-button-box">
                <span class="fixedBoxSpan">
                        *按下Esc快捷键关闭高级搜索
                </span>
                <el-button-group>
                    <el-button size="medium" @click="close">取 消</el-button>
                    <el-button size="medium" type="primary" @click="submitForm">确 定</el-button>
                </el-button-group>
            </div>
        </div>
    </el-drawer>
</template>

<script>
    import {ref, watch, getCurrentInstance} from 'vue'
    import constant from "@/util/constant"

    export default {
        name: "search",
        emits: ['searchVisibleChange'],
        props: {
            direction: {
                type: String,
                default: 'rtl'
            },
            title: {
                type: String,
                default: null
            },
            search: {
                type: Function,
                default: () => ({})
            },
            searchData: {
                type: Array,
                default: () => []
            },
            searchVisible: {
                type: Boolean,
                default: false
            },
        },
        setup(props, {emit}) {
            //data
            const {proxy} = getCurrentInstance()
            const drawer = ref(props.searchVisible)


            const searchDataVa = ref(props.searchData)

            //日期选择器格式数据
            const shortcuts = constant.SHORTCUTS

            //watch
            watch(() => props.searchVisible, (val) => {
                drawer.value = val
            })

            //FUNCTION
            /**
             * 关闭高级搜索框
             */
            const close = () => {
                emit("searchVisibleChange")
            }

            /**
             * 提交搜索表单
             */
            const submitForm = () => {
                emit("searchVisibleChange")
                props.search()
            }

            /**
             * 格式转换
             * @param item
             */
            const formatConvert = (item) =>{
                item.valueForm = proxy.$common.toSplitTime(item.value)
            }

            //return
            return {
                searchDataVa,
                shortcuts,
                drawer,
                close,
                submitForm,
                formatConvert
            }
        }
    }
</script>

<style scoped>

</style>